<template>
  <div class="container">
     <div class="timu">题目</div>
     <div class="title">{{question}}</div>
     <ul>
       <li v-for="(value,index) in answer"   @click="select(index)" :class="{'red':classSelect[index].red,'green':classSelect[index].green  }">{{value.select_num}} . {{value.answer}} </li>
     </ul>
      <div class="go" @click="go">马上去打卡</div>
  </div>
</template>
<script>
import wxParse from 'mpvue-wxparse'
export default {
  data () {
    return {
      question:'',
      answer:[],
      article:'',
      setInter:'',
      parse:false,
      classSelect:[
      {
        red:false,
        green:false
      },
      {
        red:false,
        green:false
      },
      {
        red:false,
        green:false
      },
      {
        red:false,
        green:false
      }
      ]
  }
 },
  components: {
   wxParse
  },
  methods: {
      go(){
          var _this=this;
          wx.showToast({
              title:'为你跳转到打卡页面...',
              icon:'none',
              duration:2000,
              mask:true
          })
          setTimeout(function(){
              wx.navigateTo({
                  url:'../release/main?type=daka'
              })
          },2000)
      },
   select(index){
    var _this=this;
    var clickIndex=index;
      if(_this.answer[clickIndex].is_right==1)
      {
        _this.classSelect[index].green=true;
        wx.showToast({
          title:"回答正确",
          icon:'none',
          duration:2000,
          mask:true
        })
      }else{
      wx.showToast({
          title:"回答错误,绿色选项为正确答案",
          icon:'none',
          duration:2000,
          mask:true
      })
      _this.classSelect[index].red=true;
      for(var i=0;i<_this.answer.length;i++)
      {
        if(_this.answer[i].is_right==1)
        {
          _this.classSelect[i].green=true;
        }
      }
    };
//      setTimeout(function(){
//        wx.navigateTo({
//          url:'../parse/main'
//        })
//      },2000)
   }
  },
  onShow () {
    var _this=this;
    _this.classSelect=[
      {
        red:false,
        green:false
      },
      {
        red:false,
        green:false
      },
      {
        red:false,
        green:false
      },
      {
        red:false,
        green:false
      }
      ];
    wx.request({
      url:'https://daka.rzkeji.com/api/get-question',
      method: "GET",
      header: {
        'content-type': 'application/json'
      },
      success(res){
       _this.question=res.data.data.question.question;
       _this.answer=res.data.data.answers;
       _this.article=res.data.data.question.analyse;
       var content={
        title:_this.question,
        article:_this.article
       }
       _this.$store.dispatch('setParse',content)
      }
    })
  }
}
</script>

<style scoped>
.container{width: 100%;height: 100%;background:url('http://file.rzkeji.com/web/daka/images/background-ti.jpg');background-repeat: no-repeat;background-size: cover;padding-top: 20px;}
.timu{width: 40px;height: 40px;background: red;border-radius: 30px;margin: 0 auto;line-height: 40px;font-size: 16px;text-align: center;}
.title{width: 90%;text-align: center;margin-top: 10px;margin-left: 5%;line-height: 30px;font-size: 14px;}
ul li{width: 80%;line-height: 40px;border:1px solid black;margin:10px auto;border-radius: 4px;text-align: center;font-size:28rpx;}
li.red{background: #ff9e95
}
li.green{background: #548054
}
.time{text-align: center;margin-top: 5px}
.go{width:40%;height:80rpx;background:red; font-size:32rpx;line-height:85rpx;text-align:center;border-radius:10rpx;position:absolute;right:220rpx;margin-top:30rpx;color:#fff;  }
</style>
